<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>附近</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
    </script>
    <style>
    	
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav public-color">
	    <a class="mui-action-back mui-icon mui-pull-left">
    		<button>深圳</button>
	    </a>
	    <h1 class="mui-title input" id="input">
	    	<input type="text" placeholder="搜索你要的商品" style="text-align:center;border-radius: 2px;"/>
	    </h1>
	</header>
	<!--mbody-->
	<div class="mui-content">
	    <div id="box">
	    	<a href="#" class="c1">美食</a>
	    	<a href="#">酒店</a>
			<a href="#">玩乐</a>
			<a href="#">全部</a>
	    
		</div>	
		<div style="display: block;" class="box-t1">
			<div class="ms-a">
				<span style="background:#FE566D;color:#fff;">热门</span>
				<span>面包甜点</span>
				<span>小吃快餐</span>
				<span style="margin-right: 0px;">深圳菜</span>
				
				<span>川菜</span>
				<span>日本料理</span>
				<span>湘菜</span>
				<span style="margin-right: 0px;">清汤</span>
			</div>
			
			<div class="msm-b">
				<div class="msm-b-a">
					<!--产品1-->
					<div class="msm-b-a-l">
						<img src="img/1.jpg" alt="#" />
					</div>
					<div class="msm-b-a-r">
						<h4>双人套餐</h4>
						<span class="span-span">
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span style="color:#666;font-size:13px;">￥420/人</span>
							
						</span>
						<p class="span-b">豪华套餐，内有WIFI</p>
						<p style="border-bottom: 1px solid #f0f0f0;">
							<span style="color:#fa952f;font-size:15px;" class="mui-icon mui-icon-chatboxes">
								100人消费
							</span>
						</p>
						<p style="color:#666;margin:7px 0;">
							<span style="color:#fff;background:#06BFAC;padding:2px;border-radius: 2px;">
								团
							</span>接收团体订餐，有优惠哦
						</p>
					</div>
				</div>
			</div>	
			<!--产品2-->		
			<div class="msm-b-a">
					<div class="msm-b-a-l">
						<img src="img/1.jpg" alt="#" />
					</div>
					<div class="msm-b-a-r">
						<h4>双人套餐</h4>
						<span class="span-span">
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span style="color:#666;font-size:13px;">￥420/人</span>
							
						</span>
						<p class="span-b">豪华套餐，内有WIFI</p>
						<p style="border-bottom: 1px solid #f0f0f0;">
							<span style="color:#fa952f;font-size:15px;" class="mui-icon mui-icon-chatboxes">
								100人消费
							</span>
						</p>
						<p style="color:#666;margin:7px 0;">
							<span style="color:#fff;background:#06BFAC;padding:2px;border-radius: 2px;">
								团
							</span>接收团体订餐，有优惠哦
						</p>
					</div>
				</div>	
			</div>
			<!--产品3-->		
			<div class="msm-b-a">
					<div class="msm-b-a-l">
						<img src="img/1.jpg" alt="#" />
					</div>
					<div class="msm-b-a-r">
						<h4>双人套餐</h4>
						<span class="span-span">
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span style="color:#666;font-size:13px;">￥420/人</span>
							
						</span>
						<p class="span-b">豪华套餐，内有WIFI</p>
						<p style="border-bottom: 1px solid #f0f0f0;">
							<span style="color:#fa952f;font-size:15px;" class="mui-icon mui-icon-chatboxes">
								100人消费
							</span>
						</p>
						<p style="color:#666;margin:7px 0;">
							<span style="color:#fff;background:#06BFAC;padding:2px;border-radius: 2px;">
								团
							</span>接收团体订餐，有优惠哦
						</p>
					</div>
				</div>	
			</div>
			<!--产品2-->		
			<div class="msm-b-a">
					<div class="msm-b-a-l">
						<img src="img/1.jpg" alt="#" />
					</div>
					<div class="msm-b-a-r">
						<h4>双人套餐</h4>
						<span class="span-span">
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span style="color:#666;font-size:13px;">￥420/人</span>
							
						</span>
						<p class="span-b">豪华套餐，内有WIFI</p>
						<p style="border-bottom: 1px solid #f0f0f0;">
							<span style="color:#fa952f;font-size:15px;" class="mui-icon mui-icon-chatboxes">
								100人消费
							</span>
						</p>
						<p style="color:#666;margin:7px 0;">
							<span style="color:#fff;background:#06BFAC;padding:2px;border-radius: 2px;">
								团
							</span>接收团体订餐，有优惠哦
						</p>
					</div>
				</div>	
			</div>
			<!--产品2-->		
			<div class="msm-b-a">
					<div class="msm-b-a-l">
						<img src="img/1.jpg" alt="#" />
					</div>
					<div class="msm-b-a-r">
						<h4>双人套餐</h4>
						<span class="span-span">
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span style="color:#666;font-size:13px;">￥420/人</span>
							
						</span>
						<p class="span-b">豪华套餐，内有WIFI</p>
						<p style="border-bottom: 1px solid #f0f0f0;">
							<span style="color:#fa952f;font-size:15px;" class="mui-icon mui-icon-chatboxes">
								100人消费
							</span>
						</p>
						<p style="color:#666;margin:7px 0;">
							<span style="color:#fff;background:#06BFAC;padding:2px;border-radius: 2px;">
								团
							</span>接收团体订餐，有优惠哦
						</p>
					</div>
				</div>	
			</div>		
			<!--产品2-->		
			<div class="msm-b-a">
					<div class="msm-b-a-l">
						<img src="img/1.jpg" alt="#" />
					</div>
					<div class="msm-b-a-r">
						<h4>双人套餐</h4>
						<span class="span-span">
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span style="color:#666;font-size:13px;">￥420/人</span>
							
						</span>
						<p class="span-b">豪华套餐，内有WIFI</p>
						<p style="border-bottom: 1px solid #f0f0f0;">
							<span style="color:#fa952f;font-size:15px;" class="mui-icon mui-icon-chatboxes">
								100人消费
							</span>
						</p>
						<p style="color:#666;margin:7px 0;">
							<span style="color:#fff;background:#06BFAC;padding:2px;border-radius: 2px;">
								团
							</span>接收团体订餐，有优惠哦
						</p>
					</div>
				</div>	
			</div>	
			<!--产品2-->		
			<div class="msm-b-a">
					<div class="msm-b-a-l">
						<img src="img/1.jpg" alt="#" />
					</div>
					<div class="msm-b-a-r">
						<h4>双人套餐</h4>
						<span class="span-span">
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span class="mui-icon mui-icon-starhalf"></span>
							<span style="color:#666;font-size:13px;">￥420/人</span>
							
						</span>
						<p class="span-b">豪华套餐，内有WIFI</p>
						<p style="border-bottom: 1px solid #f0f0f0;">
							<span style="color:#fa952f;font-size:15px;" class="mui-icon mui-icon-chatboxes">
								100人消费
							</span>
						</p>
						<p style="color:#666;margin:7px 0;">
							<span style="color:#fff;background:#06BFAC;padding:2px;border-radius: 2px;">
								团
							</span>接收团体订餐，有优惠哦
						</p>
					</div>
				</div>	
			</div>	
		<div class="box-t1">第二个</div>
		<div class="box-t1">第三个</div>
		<div class="box-t1">第四个</div>
	</div>
	
	<script src="js/castapp.js"></script>
	<script>
		var box = ca.id("box");
		var box1 = ca.tagName(box,"a");/*tagName通过标签获取*/
		var boxt1 = ca.className("box-t1");
		
		for(var a=0;a<box1.length;a++){
			(function(index){
				box1[a].onclick = function(){
					for(var b=0;b<boxt1.length;b++){
						box1[b].className = "";
						boxt1[b].style.display = "none";
					}
					box1[index].className = "c1";
					boxt1[index].style.display = "block"
				}
			})(a)
		}
	</script>
</body>
</html>